<template>
  <view class="content">
    <mescroll-uni
      ref="mescrollRef"
      @init="mescrollInit"
      @up="upCallback"
      :up="upOption"
      :down="{ use: false }"
    >
      <view class="section-1">
        <view class="section-body">
          <view class="form">
            <view class="form-item">
              <view class="label">项目名称</view>
              <view class="shape"></view>
              <view class="input">
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body"
                  v-model="form.project_name"
                ></u--input>
              </view>
            </view>
            <view class="actions">
              <view class="action" @click="handleResetForm()">
                <text>重</text>
                <text>置</text>
              </view>
              <view class="action search" @click="handleSearch()">
                <text>查</text>
                <text>询</text>
              </view>
            </view>
          </view>
          <view class="list">
            <view
              :class="`item ${item.showus ? 'item__expand' : ''}`"
              v-for="(item, index) in list"
              :key="item.main_id + index"
            >
              <view class="parent" @click="expandChange(item.main_id)">
                <view class="name"
                  >{{ index + 1 }}.{{ item.project_main_name }}</view
                >

                <view class="action" style="margin-left: -572rpx">
                  <view class="iconfont icon-xiangyou1"></view>
                </view>
              </view>
              <view class="child" v-if="item.showus">
                <view
                  class="child-item"
                  @click="
                    go(
                      '/pages/statistics/fourWay/details?id=' +
                        item2.id +
                        '&project_name=' +
                        item2.project_name
                    )
                  "
                  v-for="(item2, idx) in item.children"
                  :key="item2.id + idx"
                >
                  <view class="top">
                    <view class="name"
                      >{{ index + 1 }}-{{ idx + 1 }}.{{
                        item2.project_name
                      }}</view
                    >
                    <view class="action">
                      <view class="iconfont icon-xiangyou1"></view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="problem-wrapper" v-show="list.length < 1">
              <image
                src="https://www.mescroll.com/img/mescroll-empty.png"
              ></image>
              <view class="">~ 空空如也 ~</view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import {
  getStatisticalFourWay,
  getFourWayChildrenList,
  powerAnalysisApi,
} from "@/api/project.js";
import { powerInfoApi } from "@/api/statistics.js";
export default {
  data() {
    return {
      listlength: "",
      mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
      upOption: {
        textNoMore: "-- 没有更多了 --",
      },
      form: {
        start_time: "",
        end_time: "",
        project_name: "",
        city: "",
        is_high_risk: "",
      },
      city: "",
      pageSize: 20,
      startStamp: 0,
      endStamp: 0,
      area: "",
      list: [],
      childrenList: [],
      expandList: [],
      showus: false,
      showStart: false,
      showEnd: false,
      total: {
        next_month: 0,
        td_month: 0,
        td_num: 0,
      },
      highRisk: "",
      curBoard: 1,
      type: "day",
      curd: 0,
      curIdx: 0,
      curType: 4,
    };
  },
  methods: {
    setCurIdx(idx, type) {
      this.curIdx = idx;
      this.curType = type;
      this.curBoard = type;
      this.getTotal();
    },

    async expandChange(id) {
      const dep = JSON.parse(JSON.stringify(this.list));
      let _idx = undefined;
      dep.forEach((item, idx) => {
        if (item.main_id === id) {
          _idx = idx;
          if (!dep[idx].children) {
            dep[idx].children = [];
          }
        }
      });
      if (
        _idx !== undefined &&
        dep[_idx].children &&
        dep[_idx].children.length === 0
      ) {
        uni.showLoading({
          title: "加载中...",
        });
        const { data } = await getFourWayChildrenList({
          project_id: id,
        });
        uni.hideLoading();
        dep[_idx].children = data.data;
      }

      // this.showus = !this.showus
      this.list = dep;
      this.list[_idx].showus = !this.list[_idx].showus;
      //  console.log(this.list, 333);
      console.log(this.list[_idx].showus, 111);
    },

    async fetchInfo(id, project_id) {
      uni.showLoading({ title: "加载中..." });
      const { data } = await powerInfoApi({ id: project_id });
      if (data.code === 1) {
        let dep = JSON.parse(JSON.stringify(this.list));
        dep[id.split("-")[0]].children[id.split("-")[1]].children = data.data;
        this.list = dep;
      }
      uni.hideLoading();
    },

    go(path) {
      uni.navigateTo({
        url: path,
      });
    },
    /*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    /*上拉加载的回调*/
    async upCallback() {
      const { data } = await getStatisticalFourWay({
        project_name: this.form.project_name,
      });
      this.list = data.data;
      this.mescroll.endErr();
    },
    handleResetForm() {
      for (let key in this.form) {
        this.form[key] = "";
      }
      this.mescroll.resetUpScroll();
      this.mescroll.scrollTo(0, 0);
    },
    handleSearch() {
      this.curBoard = this.curBoard;
      this.mescroll.resetUpScroll();
      this.mescroll.scrollTo(0, 0);
    },
    async getTotal() {
      uni.showLoading({ title: "加载中..." });
      const { data } = await powerAnalysisApi({
        type: this.curBoard,
      });
      this.mescroll.endErr();
      uni.hideLoading();
    },
  },
  onReady() {
    this.startStamp = new Date().valueOf();
    this.endStamp = new Date().valueOf();
    this.getTotal();
  },
  onLoad(data) {
    if (data.type) {
      this.type = data.type;
      if (data.type === "all") {
        this.curBoard = 4;
      }
    }
    this.curd = data.curd ? data.curd : 0;
  },
};
</script>

<style lang="scss" scoped>
.custom-empty {
  position: static;
}
.content {
  background-color: #fff;
}
.section {
  background-color: #2c5cff;

  .section-bdoy {
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    background-color: #2c5cff;
    overflow: hidden;

    .tab {
      width: 100%;
      height: 100rpx;
      @include clear();
      background-color: #10298a;

      .item {
        width: 25%;
        float: left;
        height: 100rpx;
        background-color: #10298a;
        position: relative;

        .label {
          width: 100%;
          float: left;
          position: relative;
          z-index: 10;
          box-sizing: border-box;
          text-align: center;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #87c6ff;
          line-height: 100rpx;
        }

        .time-picker {
          margin-top: 32rpx;
          float: left;
          display: inline-block;
          padding: 0 18rpx;
          height: 36rpx;
          border-radius: 17rpx;
          border: solid 1rpx #87c6ff;
          line-height: 36rpx;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #87c6ff;
          margin-left: 20rpx;
        }

        .shape {
          z-index: 1;
          width: 50rpx;
          height: 50rpx;
          position: absolute;
          bottom: 0;
          left: -50rpx;
          background: #000;
          display: none;
          background-color: #1d33c6;
          overflow: hidden;

          .shape-body {
            width: 50rpx;
            height: 50rpx;
            background-color: #10298a;
            border-bottom-right-radius: 50rpx;
          }
        }

        .shape-mirrow {
          z-index: 1;
          left: 0;
          display: none;

          .shape-body {
            border-bottom-right-radius: 0rpx;
            border-bottom-left-radius: 50rpx;
          }
        }
      }

      .item__active {
        border-top-left-radius: 50rpx;
        border-top-right-radius: 50rpx;
        background-color: #1534ce;

        .label {
          color: #fff;
        }

        .shape {
          display: block;
        }

        .shape-mirrow {
          display: none;
        }
      }

      .item__active_next {
        border-bottom-right-radius: 50rpx;

        .shape {
          display: none;
        }

        .shape-mirrow {
          display: block;
        }
      }
    }

    .top-total {
      width: 100%;
      box-sizing: border-box;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 26rpx;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rpx;
      color: #87c6ff;
      background: #1534ce;
      padding-left: 40rpx;
      padding-right: 40rpx;

      text {
        font-weight: bold;
        font-size: 58rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 49rpx;
        letter-spacing: 0rpx;
        color: #ffffff;
      }
    }
  }
}
.section-1 {
  width: 100%;
  position: relative;
  z-index: 10;
  background: #2e5efe;
  .section-body {
    width: 100%;
    height: 100%;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    background-color: #fff;
    overflow: hidden;
  }
  .list {
    width: 670rpx;
    box-sizing: border-box;
    margin-left: 40rpx;
    border-top: 2rpx solid #d8e4f2;

    .item {
      width: 100%;
      border-bottom: solid 2rpx #f2f2f0;

      .parent {
        width: 100%;
        @include clear();
        .name {
          width: 600rpx;
          line-height: 30rpx;
          padding: 26rpx 0;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 2rpx;
          color: #3b3c40;
          float: left;
          margin-left: 54rpx;
        }

        .count {
          float: right;
          min-width: 50rpx;
          height: 46rpx;
          margin-top: 18rpx;
          border-radius: 28rpx;
          line-height: 46rpx;
          text-align: center;
          font-size: 23rpx;
          font-weight: bold;
          padding: 5rpx;
          color: #395cf5;
          background: #ffde00;
          // margin-right: 40rpx;
          text {
            font-size: 16rpx;
          }
        }

        .action {
          float: left;
          width: 32rpx;
          margin-right: 18rpx;
          line-height: 82rpx;
          text-align: center;
          color: #3b3c40;
          margin-left: -645rpx !important;
          .iconfont {
            font-size: 32rpx;
            transition: 0.2s ease;
            transform: rotate(90deg);
          }
        }
      }
      .child {
        width: 750rpx;
        margin-left: -40rpx;
        background: #f2f2fa;

        .child-item {
          width: 100%;
          border-bottom: 2rpx solid #e3e8f5;
          box-sizing: border-box;
          padding-left: 50rpx;
          @include clear();
          &:last-child {
            border-bottom: none;
          }

          .top {
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
            padding-left: 40rpx;
            .action {
              width: 32rpx;
              line-height: 82rpx;
              float: left;
              text-align: center;
              color: #7f98ae;
              margin-right: 18rpx;
              .iconfont {
                font-size: 32rpx;
                transition: 0.2s ease;
                transform: rotate(90deg);
              }
            }
            .name {
              float: left;
              width: calc(100% - 125rpx);
              box-sizing: border-box;
              padding: 26rpx 0;
              font-size: 26rpx;
              color: #3b3c40;
              font-size: 26rpx;
            }
            .desc {
              float: left;
              width: 100%;
              font-size: 16rpx;
              color: #9b9b9b;
              box-sizing: border-box;
              padding-left: 50rpx;
              padding-bottom: 26rpx;
              text {
                margin-right: 30rpx;
                display: inline-block;
              }
            }
            .action {
              width: 108rpx;
              line-height: 82rpx;
              float: left;
              text-align: center;
              color: #7f98ae;
              margin-right: 18rpx;
              .iconfont {
                margin-left: -30rpx;
                font-size: 32rpx;
                transition: 0.2s ease;
                transform: rotate(0deg) !important;
              }
            }
          }
        }
      }

      .grad {
        width: 750rpx;
        margin-left: -50rpx;
        background: #d9d9e2;
        .grad-item {
          width: 100%;
          &:last-child {
            border-bottom: none;
          }

          .grad-top {
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
            padding-left: 40rpx;
            padding: 28rpx 40rpx;
            .grad-item2 {
              width: 100%;
              @include clear();
              margin-bottom: 15rpx;

              .grad-lable {
                width: 200rpx;
                float: left;
                font-size: 22rpx;
                color: #3b3c40;
                line-height: 30rpx;
              }
              .grad-value {
                width: calc(100% - 200rpx);
                float: left;
                font-size: 22rpx;
                color: #3b3c40;
                line-height: 30rpx;
              }
            }
            .name {
              float: left;
              width: calc(100% - 40rpx);
              padding: 26rpx 0;
              padding-bottom: 10rpx;
              font-size: 26rpx;
              color: #3b3c40;
              padding-left: 50rpx;
              box-sizing: border-box;
            }
            .desc {
              float: left;
              width: calc(100% - 40rpx);
              font-size: 16rpx;
              color: #9b9b9b;
              box-sizing: border-box;
              padding-left: 50rpx;
              padding-bottom: 26rpx;
              text {
                min-width: 300rpx;
                margin-right: 30rpx;
                display: inline-block;
              }
            }
          }
        }
      }
      .action__active {
        .iconfont {
          transform: rotate(-90deg) !important;
        }
      }
    }

    .item__expand {
      .parent {
        .action {
          .iconfont {
            transform: rotate(-90deg);
          }
        }
      }

      .child {
        box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.05) inset;
      }
    }
  }
  .actions {
    width: 100%;
    height: 50rpx;
    margin-top: 29rpx;
    padding-bottom: 40rpx;
    display: flex;
    justify-content: space-between;
    .action {
      width: 288rpx;
      height: 48rpx;
      background-color: #395cf5;
      border-radius: 20rpx;
      text-align: center;
      line-height: 48rpx;
      font-size: 26rpx;
      font-weight: normal;
      font-stretch: normal;
      line-height: 48rpx;
      color: #ffffff;
      text {
        &:first-child {
          margin-right: 20rpx;
        }
      }
    }
    .search {
      background-color: #1534ce;
    }
  }
  .form {
    width: 100%;
    padding: 0 75rpx;
    padding-top: 40rpx;
    box-sizing: border-box;
    .form-item {
      width: 600rpx;
      height: 48rpx;
      border-radius: 20rpx;
      border: solid 2rpx #1534ce;
      margin: 0 auto;
      margin-bottom: 25rpx;
      &:last-child {
        margin-bottom: 34rpx;
      }
      @include clear();
      .label {
        float: left;
        width: 134rpx;
        height: 48rpx;
        text-align: center;
        line-height: 44rpx;
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: #1534ce;
      }
      .shape {
        width: 3rpx;
        height: 32rpx;
        background-color: #7f98ae;
        float: left;
        margin-top: 8rpx;
      }
      .input {
        float: left;
        width: calc(100% - 134rpx - 3rpx);
        .input-body {
          box-sizing: border-box;
          width: 100%;
          height: 44rpx;
          line-height: 44rpx;
          padding: 0 !important;
          border: none;
          padding-left: 30rpx !important;
          padding-right: 30rpx !important;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.7);
        }
        .input-placeholder {
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }
    .size6 {
      .label {
        width: 184rpx;
      }
      .input {
        width: calc(100% - 184rpx - 3rpx);
        position: relative;
        .iconfont {
          position: absolute;
          right: 25rpx;
          top: 7rpx;
          font-size: 30rpx;
          color: #dad9df;
        }
      }
    }
    .size2 {
      .label {
        width: 77rpx;
      }
      .input {
        width: calc(100% - 77rpx - 3rpx);
      }
    }
  }
}
.problem-wrapper {
  color: #808080;
  margin: 0 auto;
  text-align: center;
  image {
    margin-top: 300rpx;
    width: 200rpx;
    height: 200rpx;
  }
}
</style>
